<template>
  <a-layout id="app-layout-sider">
    <a-layout-sider
      v-model="collapsed"
      theme="dark"
      class="layout-sider"
      width="100"
    >
      <div class="logo">
        <!-- <img class="pic-logo" src="~@/assets/logo.png" /> -->
        <icon-tiktok-color class="pic-logo" size="80" />
      </div>
      <a-menu
        class="menu-item"
        theme="dark"
        mode="inline"
        :selectedKeys="[current]"
        @menu-item-click="menuHandle"
      >
        <a-menu-item
          v-for="(menuInfo, index) in menu"
          :key="index"
          :class="{ wrapper: menuInfo.title === '其他' }"
        >
          <icon-font :type="menuInfo.icon" />
          {{ menuInfo.title }}
        </a-menu-item>
        <a-menu-item @click="logout">
          <icon-font type="icon-tuichu2" />
          退出
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-content class="layout-content">
        <router-view />
      </a-layout-content>
    </a-layout>
    <!-- 设置弹框 -->
    <a-modal
      v-model:visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
      title="提示"
      :width="280"
      body-class="modal-content"
    >
      <p style="text-align: center">确定退出应用程序？</p>
    </a-modal>
  </a-layout>
</template>
<script>
import { ipc } from '@/utils/ipcRenderer'

export default {
  name: 'AppSider',
  data() {
    return {
      visible: false,
      collapsed: true,
      current: 'menu_1',
      menu: {
        menu_1: {
          icon: 'icon-home',
          title: '账号管理',
          pageName: 'Framework',
          params: {
            // test: 'hello'
          },
        },
        menu_2: {
          icon: 'icon-wuguan',
          title: '智能回复',
          pageName: 'Os',
          params: {},
        },
        menu_3: {
          icon: 'icon-zhineng',
          title: '智能场控',
          pageName: 'Hardware',
          params: {},
        },
        menu_4: {
          icon: 'icon-wj-rz',
          title: '运行日志',
          pageName: 'vueui',
          params: {},
        },
        menu_5: {
          icon: 'icon-qitawenti',
          title: '其他',
          pageName: 'OthersIndex',
          params: {},
        },
      },
    }
  },
  created() {
    // 设置为暗黑主题
    document.body.setAttribute('arco-theme', 'dark')
  },
  mounted() {
    this.menuHandle()
  },
  methods: {
    menuHandle(key) {
      console.log('sider menu key:', key)
      this.current = key ? key : this.current

      const linkInfo = this.menu[this.current]
      if (linkInfo && linkInfo.pageName) {
        this.$router.push({ name: linkInfo.pageName, params: linkInfo.params })
      }
    },
    // 退出
    logout() {
      this.visible = true
    },
    handleCancel() {
      this.visible = false
    },
    handleOk() {
      console.log('退出')
      ipc.invoke('on-logout-event', 'logout').then((r) => {
        console.log(r)
        this.visible = false
      })
    },
  },
}
</script>
<style lang="less" scoped>
// 嵌套
#app-layout-sider {
  height: 100%;
  .logo {
    width: 60px;
    height: 60px;
    background: #444444;
    border-radius: 8px;
    margin: 20px auto 0px;
    // border-bottom: 1px solid var(--color-neutral-3);
    border-bottom: 1px solid #333333;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .pic-logo {
    height: 32px;
    //background: rgba(139, 137, 137, 0.2);
    margin: 10px;
  }
  .layout-sider {
    // border-top: 1px solid var(--color-neutral-3);
    // border-right: 3px solid var(--color-neutral-3);
    border-right: 5px solid #333333;
    // background: var(--color-menu-dark-bg);
    // color: var(--color-menu-light-bg);
    overflow: hidden;
  }
  .menu-item {
    .arco-menu-item {
      color: var(--color-bg-white);
      margin-top: 25px;
      margin-bottom: 25px;
      padding: 6px 8px 0px !important;
      // display: flex;
      // align-items: center;
      &.wrapper {
        margin-top: 70px;
      }
      svg {
        display: block;
        margin: 0 auto;
      }
    }
  }
  .layout-content {
    height: 100%;
    // background: var(--color-menu-dark-bg);
    // color: var(--color-menu-light-bg);
  }
  .arco-menu-selected {
    background: rgb(var(--arcoblue-6));
  }
}
:deep(.arco-menu .arco-menu-item .arco-icon) {
  margin-right: 8px;
  display: inline-block;
}
</style>
